import { Component, Host, h, Prop, forceUpdate } from '@stencil/core';
import { IbzExpCalendarController } from '../../controllers';
import { ICell } from '../../interface';

/**
 * 导航日历
 *
 * @author chitanda
 * @date 2021-06-22 13:06:46
 * @export
 * @class IBzExpCalendar
 */
@Component({
  tag: 'ibz-exp-calendar-content',
  styleUrl: 'ibz-exp-calendar-content.scss',
})
export class IBzExpCalendarContent {
  /**
   * 控制器
   *
   * @type {IbzExpCalendarController}
   * @memberof IBzExpCalendarContent
   */
  @Prop()
  ctrl: IbzExpCalendarController;

  /**
   * 星期
   *
   * @type {string[]}
   * @memberof IBzExpCalendarContent
   */
  week: string[] = ['日', '一', '二', '三', '四', '五', '六'];

  /**
   * 连接到组件回调
   *
   * @memberof IBzExpCalendarContent
   */
  connectedCallback() {
    this.changeDate = this.changeDate.bind(this);
    this.ctrl.evt.on('changeDate', this.changeDate);
    this.selectChange = this.selectChange.bind(this);
    this.ctrl.evt.on('selectChange', this.selectChange);
  }

  /**
   * 组件断开连接回调
   *
   * @memberof IBzExpCalendarContent
   */
  disconnectedCallback() {
    this.ctrl.evt.off('changeDate', this.changeDate);
  }

  /**
   * 日期变更
   *
   * @memberof IBzExpCalendarContent
   */
  changeDate() {
    this.ctrl.setCells();
    forceUpdate(this);
  }

  /**
   * 选中发生改变
   *
   * @memberof IBzExpCalendarContent
   */
  selectChange() {
    forceUpdate(this);
  }

  /**
   * 选择日期
   *
   * @param {ICell} cell
   * @memberof IBzExpCalendarContent
   */
  selectDate(cell: ICell) {
    this.ctrl.seletDate(cell);
  }

  /**
   * 绘制函数
   *
   * @return {*}
   * @memberof IBzExpCalendarContent
   */
  render() {
    const rows: any[] = [];
    let row: ICell[] = [];
    this.ctrl.cells.map((cell: ICell, index: number) => {
      row.push(cell);
      if (index > 0 && (index + 1) % 7 === 0) {
        rows.push(row);
        row = [];
      }
    });
    return (
      <Host
        class={{
          'ibz-exp-calendar-content': true,
          blue: this.ctrl.theme.toLowerCase() === 'blue',
          small: this.ctrl.size.toLowerCase() === 'small',
          large: this.ctrl.size.toLowerCase() === 'large',
        }}
      >
        <table class='calendar-table'>
          <tbody class='calendar-table-tbody'>
            <tr class='calendar-table-header'>
              {this.week.map((name: string) => {
                return <th>{name}</th>;
              })}
            </tr>
            {this.ctrl.cells.length > 0
              ? rows.map((row: any) => {
                  return (
                    <tr>
                      {row.map((cell: any) => {
                        return (
                          <td class={cell.class}>
                            <div>
                              <button onClick={() => this.selectDate(cell)}>{cell.value}</button>
                            </div>
                          </td>
                        );
                      })}
                    </tr>
                  );
                })
              : null}
          </tbody>
        </table>
      </Host>
    );
  }
}
